<template><div class="cos">
    <div id="myCharts" class="chartsMap">
</div>
</div>
        
</template>
<script>

export default {
    name:'myCharts',
    data(){
        return {

        }
    },
    mounted(){
        this.drawLine();
    },
    methods:{
        drawLine(){
        //  var myChartsContainer = document.getElementById('myCharts');
        //  var resizeCharts = function(){
        //      myChartsContainer.style.width=(document.body.offsetWidth)+'px'
        //  }
        //  resizeCharts();
         var myChartsChina = this.$echarts.init(document.getElementById('myCharts'));
         var optionMap = {
              tooltip: {
                  
              },
                 legend: {
                            orient: 'vertical',
                            left: 'left',
                            data:['sadasdad'],
                            textStyle:{

                            }
                        },
                 visualMap: { //左下角的颜色配置
                            min: 0,
                            max: 10000,
                            left: '30%',
                            top: 'bottom',
                            text: ['超标','优良'],
                            calculable : true,
                            color:['#0b50b9','rgba(0, 0, 0, 0.5)'],
                            
                        },
                 selectedMode: 'single',
                 series : [
                            {
                              name: '地区服务集群部署数量',   //浮动框显示的数据
                              type: 'map',
                              mapType: 'china',
                              itemStyle: {
                                    normal:{ //地图背景色
                                        areaColor:'#031525',
                                        borderColor: 'rgba(0, 0, 0, 0.2)'
                                    },
                                    emphasis:{ //悬停时显示的颜色
                                        // shadowOffsetX: ,
                                        // shadowOffsetY: ,
                                        // shadowBlur: ,
                                        // borderWidth: ,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                },
                                showLegendSymbol: true,
                                label: {
                                    normal: {
                                        show: true
                                    },
                                    emphasis: {
                                        show: true
                                    }
                                },
                                data:[
                                     {name: '北京',value: 12,number:'1234',pref:'良好' },
                                      {name: '天津',value: 13 },
                                      {name: '上海',value: 14 },
                                      {name: '重庆',value: 213 },
                                      {name: '河北',value: 23 },
                                      {name: '河南',value: 3434 },
                                      {name: '云南',value: 34 },
                                      {name: '辽宁',value: 353 },
                                      {name: '黑龙江',value: 454 },
                                      {name: '湖南',value: 4545 },
                                      {name: '安徽',value: 21 },
                                      {name: '山东',value: 12},
                                      {name: '新疆',value:1231 },
                                      {name: '江苏',value: 22 },
                                      {name: '浙江',value: 213 },
                                      {name: '江西',value:2131},
                                      {name: '湖北',value: 4354 },
                                      {name: '广西',value: 34321 },
                                      {name: '甘肃',value: 12344 },
                                      {name: '山西',value: 123214 },
                                      {name: '内蒙古',value: 3434 },
                                      {name: '陕西',value: 1234 },
                                      {name: '吉林',value: 6756 },
                                      {name: '福建',value: 45 },
                                      {name: '贵州',value: 4543 },
                                      {name: '广东',value: 65 },
                                      {name: '青海',value: 676 },
                                      {name: '西藏',value: 4545 },
                                      {name: '四川',value: 234 },
                                      {name: '宁夏',value: 2345 },
                                      {name: '海南',value: 545 },
                                      {name: '台湾',value: 4543 },
                                      {name: '香港',value: 76 },
                                      {name: '澳门',value: 43543 }
                                ]
                            }
                        ]
               }

               myChartsChina.setOption(optionMap);
        // window.onresize=function(){
        //     resizeCharts();
        //     myChartsChina.resize();
        // }
        }
    }

    
}

</script>
<style scoped>
/* #myCharts {
    padding-top: 30px;
    color: white;
} */
.cos {
    width: auto !important;
    right: 0px;
}
.chartsMap {
    height: 600px;
    width: 80%;
    margin-left: 7%;
    margin-top: 0;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) */
}
</style>

<!-- // methods:{
    //     init(){
    //         this.drawLine();
    //     },
    //     drawLine(){
    //         //初始化Echarts实例
    //         let myCharts = this.$echarts.init(document.getElementById('myCharts'))
    //         //制作图标
    //         myCharts.setOption({
    //         title: { text: '在Vue中使用echarts' },
    //         tooltip: {},
    //         xAxis: {
    //             data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    //         },
    //         yAxis: {},
    //         series: [{
    //             name: '销量',
    //             type: 'bar',
    //             data: [5, 20, 36, 10, 10, 20]
    //         }]
    //     });
    //     }
    // } -->